import { Component, inject, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzFlexModule } from 'ng-zorro-antd/flex';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { NzSpaceModule } from 'ng-zorro-antd/space';
import { NzTypographyModule } from 'ng-zorro-antd/typography';

import icons from '../../../../assets/icons.json';

//  <ul style="overflow-x: hidden; list-style: none; height:500px">
//       @for (item of svgIcons; track $index) {
//         <li
//           style="position: relative;float: left;width: 16.66%;height: 60px;margin: 3px 0;padding: 10px 0 0;overflow: hidden;color: #555;text-align: center;list-style: none;background-color: inherit;border-radius: 4px;cursor: pointer;transition: color .3s ease-in-out,background-color .3s ease-in-out;"
//           (click)="selected(item)"
//         >
//           <div nz-flex vertical>
//             <i nz-icon [nzType]="item" style="font-size: 50px; color: #1890FF"></i>
//             <span>{{ item }}</span>
//           </div>
//         </li>
//       }
//     </ul>

@Component({
  selector: 'app-config-icon-modal',
  template: `
    <div
      nz-space
      nzAlign="center"
      nzSize="large"
      style="overflow-x: hidden; padding-block: 10px; height:500px;display: flex; align-items: flex-start; flex-wrap: wrap;"
    >
      @for (item of svgIcons; track $index) {
        <div *nzSpaceItem nz-flex nzVertical [nzJustify]="'center'" [nzAlign]="'center'" (click)="selected(item)" style="width: 100px;">
          <!-- TODO 根据主题色填充颜色 -->
          <i nz-icon [nzType]="item" style="font-size: 50px; color: #1890FF"></i>
          <p nz-typography nzEllipsis style="width:100%;text-align:center;">{{ item }}</p>
        </div>
      }
    </div>
    <nz-divider />
    <div nz-row style="align-items: center;">
      <div nz-col nzSpan="2" style="text-align: center;">{{ svgIcons.length }}/{{ allSvgIcons.length }}</div>
      <div nz-col nzSpan="22"
        ><nz-input-group [nzSuffix]="suffixIconSearch">
          <input type="text" nz-input placeholder="输入关键字,点击回车搜索" [(ngModel)]="filterParam" (input)="filterIcon()" />
        </nz-input-group>
        <ng-template #suffixIconSearch> <i nz-icon [nzType]="'search'"></i> </ng-template
      ></div>
    </div>
  `,
  imports: [
    NzIconModule,
    NzFlexModule,
    NzDividerModule,
    NzSpaceModule,
    NzTypographyModule,
    NzDividerModule,
    NzInputModule,
    FormsModule,
    NzGridModule
  ]
})
export class IconModalComponent implements OnInit {
  private readonly modal = inject(NzModalRef);

  allSvgIcons: string[] = [];
  svgIcons: string[] = [];
  filterParam = '';
  ngOnInit() {
    this.allSvgIcons = icons;
    this.svgIcons = icons;
  }
  filterIcon() {
    console.log(this.filterParam);
    if (!this.filterParam) {
      this.svgIcons = icons;
    } else {
      this.svgIcons = icons.filter(item => item.includes(this.filterParam));
    }
  }
  selected(record: NzSafeAny): void {
    this.modal.destroy(record);
  }
}
